{% extends "xhs/layout.html" %}

{% block title %}小红书数据管理系统 - 地理位置分析{% endblock %}

{% block page_title %}地理位置分析{% endblock %}

{% block page_actions %}
<form class="form-inline" method="GET" action="/locations">
    <div class="input-group input-group-sm mr-2">
        <input type="text" name="search" class="form-control" placeholder="搜索位置" value="{{ request.args.get('search', '') }}">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="submit">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </div>
    {% if request.args.get('search') %}
    <a href="/locations" class="btn btn-sm btn-outline-danger">
        <i class="fas fa-times"></i> 清除过滤
    </a>
    {% endif %}
</form>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <i class="fas fa-map-marker-alt text-danger"></i> 从笔记中提取的地理位置
        <span class="badge badge-pill badge-light">{{ total if total else 0 }} 个位置</span>
    </div>
    <div class="card-body">
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i> 该页面展示从笔记的<code>edit_time</code>字段中提取的位置信息。例如："04-21 <strong>四川</strong>"中的"四川"部分。
        </div>

        {% if locations %}
        <div class="row">
            {% for location in locations %}
            <div class="col-md-4 col-lg-3 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="fas fa-map-marker-alt text-danger"></i>
                            {{ location.location_name }}
                        </h5>
                        <div class="mb-2">
                            <span class="badge badge-primary">{{ location.count }}</span> 篇笔记
                        </div>
                    </div>
                    <div class="card-footer bg-transparent">
                        <a href="/locations/{{ location.location_name }}" class="btn btn-sm btn-outline-primary btn-block">
                            <i class="fas fa-eye"></i> 查看详情
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        {% if total_pages > 1 %}
        <nav aria-label="Page navigation" class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item {{ 'disabled' if current_page == 1 else '' }}">
                    <a class="page-link" href="{{ url_for('xhs.locations_list', page=current_page-1, search=request.args.get('search', '')) if current_page > 1 else '#' }}">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                </li>
                
                {% for page_num in range(max(1, current_page - 2), min(total_pages + 1, current_page + 3)) %}
                <li class="page-item {{ 'active' if page_num == current_page else '' }}">
                    <a class="page-link" href="{{ url_for('xhs.locations_list', page=page_num, search=request.args.get('search', '')) }}">
                        {{ page_num }}
                    </a>
                </li>
                {% endfor %}
                
                <li class="page-item {{ 'disabled' if current_page == total_pages else '' }}">
                    <a class="page-link" href="{{ url_for('xhs.locations_list', page=current_page+1, search=request.args.get('search', '')) if current_page < total_pages else '#' }}">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </li>
            </ul>
        </nav>
        {% endif %}
        
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-map-marker-alt fa-4x text-muted mb-3"></i>
            <p class="lead text-muted">暂无地理位置数据</p>
            <p class="text-muted">当您的笔记中包含位置信息时，将自动在此处显示</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %} 